<template>
	<view class="cate-container">
		<view class="flex-row">
			<view class="left-nav">
				<view v-for="(item, index) in categoryList" :key="item.id" @click="handleTab(index)"
					:class="{ active: currentIndex === index }">
					<text class="nav-text">{{ item.catname }}</text>
				</view>
			</view>

			<scroll-view class="right-content" scroll-y :scroll-into-view="scrollIntoView" :scroll-with-animation="true"
				@scroll="handleScroll">
				<view class="content-wrap">
					<view v-for="(category, catIndex) in categoryList" :key="category.id" class="category-item"
						:id="`category-${catIndex}`">
						<image class="top-img" src="/static/staticcate/topimg.png" mode="widthFix"></image>

						<view class="subitem-grid" >
							<view  class="subitem-card">
								<image class="subitem-icon" :src="category.icon" mode="widthFix"></image>
								<text class="subitem-name">{{ category.catname }}</text>
							</view>
						</view>

					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//存储接口获取的数据
				categoryList: [], // 修复了变量名拼写错误
				currentIndex: 0,
				scrollIntoView: '',
				isClicking: false,
				datalist: [{
						id: 'front-end',
						title: "前端开发",
						subItems: [{
								subId: 0,
								icon: "/static/staticcate/hongmeng.png",
								name: "鸿蒙1"
							},
							{
								subId: 1,
								icon: "/static/staticcate/android.png",
								name: "Android1"
							},
							{
								subId: 2,
								icon: "/static/staticcate/ios.png",
								name: "iOS1"
							},
							{
								subId: 3,
								icon: "/static/staticcate/react.png",
								name: "React native1"
							},
							{
								subId: 4,
								icon: "/static/staticcate/weex.png",
								name: "WEEX1"
							},
							{
								subId: 5,
								icon: "/static/staticcate/swift.png",
								name: "Swift1"
							}
						]
					},
					{
						id: 'back-end',
						title: "后端开发",
						subItems: [{
								subId: 0,
								icon: "/static/staticcate/hongmeng.png",
								name: "鸿蒙2"
							},
							{
								subId: 1,
								icon: "/static/staticcate/android.png",
								name: "Android2"
							},
							{
								subId: 2,
								icon: "/static/staticcate/ios.png",
								name: "iOS2"
							},
							{
								subId: 3,
								icon: "/static/staticcate/react.png",
								name: "React native2"
							},
							{
								subId: 4,
								icon: "/static/staticcate/weex.png",
								name: "WEEX2"
							},
							{
								subId: 5,
								icon: "/static/staticcate/swift.png",
								name: "Swift2"
							}
						]
					},
					{
						id: 'ai',
						title: "AI人工智能",
						subItems: [{
								subId: 0,
								icon: "/static/staticcate/hongmeng.png",
								name: "鸿蒙3"
							},
							{
								subId: 1,
								icon: "/static/staticcate/android.png",
								name: "Android3"
							},
							{
								subId: 2,
								icon: "/static/staticcate/ios.png",
								name: "iOS3"
							},
							{
								subId: 3,
								icon: "/static/staticcate/react.png",
								name: "React native3"
							},
							{
								subId: 4,
								icon: "/static/staticcate/weex.png",
								name: "WEEX3"
							},
							{
								subId: 5,
								icon: "/static/staticcate/swift.png",
								name: "Swift3"
							}
						]
					},
					{
						id: 'computer-base',
						title: "计算机基础",
						subItems: [{
								subId: 0,
								icon: "/static/staticcate/hongmeng.png",
								name: "鸿蒙4"
							},
							{
								subId: 1,
								icon: "/static/staticcate/android.png",
								name: "Android4"
							},
							{
								subId: 2,
								icon: "/static/staticcate/ios.png",
								name: "iOS4"
							},
							{
								subId: 3,
								icon: "/static/staticcate/react.png",
								name: "React native4"
							},
							{
								subId: 4,
								icon: "/static/staticcate/weex.png",
								name: "WEEX4"
							},
							{
								subId: 5,
								icon: "/static/staticcate/swift.png",
								name: "Swift4"
							}
						]
					},
					{
						id: 'cutting-edge',
						title: "前沿技术",
						subItems: [{
								subId: 0,
								icon: "/static/staticcate/hongmeng.png",
								name: "鸿蒙5"
							},
							{
								subId: 1,
								icon: "/static/staticcate/android.png",
								name: "Android5"
							},
							{
								subId: 2,
								icon: "/static/staticcate/ios.png",
								name: "iOS5"
							},
							{
								subId: 3,
								icon: "/static/staticcate/react.png",
								name: "React native5"
							},
							{
								subId: 4,
								icon: "/static/staticcate/weex.png",
								name: "WEEX5"
							},
							{
								subId: 5,
								icon: "/static/staticcate/swift.png",
								name: "Swift5"
							}
						]
					}
				]
			};
		},
		methods: {
			handleTab(index) {
				if (this.currentIndex === index) return;

				this.isClicking = true;
				this.currentIndex = index;
				this.scrollIntoView = `category-${index}`;

				setTimeout(() => {
					this.isClicking = false;
				}, 300);
			},
			handleScroll(e) {
				if (this.isClicking) return;

				const scrollTop = e.detail.scrollTop;
				uni.createSelectorQuery().selectAll('.category-item').boundingClientRect((rects) => {
					rects.forEach((rect, index) => {
						// 只要分类顶部在视口内（top ≤ 0），就判定为当前分类
						if (rect.top <= 0 && rect.top + rect.height > 0) {
							if (this.currentIndex !== index) {
								this.currentIndex = index;
							}
						}
					});
				}).exec();
			}
		},
		created() {
			uni.request({
				url:"http://47.113.230.113:8088/category/list",
				success:((res)=>{
						console.log(res.data,'接口获取的数据')
						this.categoryList=res.data
						console.log(this.categoryList,'赋值接口的数据')
				})
				
			})
		}
	};
</script>

<style scoped>
	/* 样式部分保持不变 */
	.cate-container {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
		height: 100%;
	}

	.left-nav {
		width: 30%;
		background-color: #fafbfd;
		overflow-y: auto;
	}

	.left-nav>view {
		padding-left: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		transition: background-color 0.2s;
	}

	.left-nav>view.active {
		background-color: #fff;
		position: relative;
	}

	.left-nav>view.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 6rpx;
		background-color: #ff4d4f;
	}

	.nav-text {
		font-size: 28rpx;
		transition: color 0.2s;
	}

	.left-nav>view.active .nav-text {
		color: #ff4d4f;
		font-weight: bold;
	}

	.right-content {
		width: 70%;
		height: 100%;
		box-sizing: border-box;
		background-color: #f9f9f9;
	}

	.content-wrap {
		padding-bottom: 20rpx;
	}

	.category-item {
		height: 1500rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.top-img {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
	}

	.subitem-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.subitem-card {
		width: 31%;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.subitem-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
	}

	.subitem-name {
		font-size: 24rpx;
		color: #333;
		margin-top: 10rpx;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>